<template>
  <!-- 下拉刷新 -->
  <van-pull-refresh v-model="refreshing" @refresh="refresh">
      <!-- 加载列表 -->
      <van-list
          v-model:loading="loading"
          :finished="finished"
          :offset="10"
          :immediate-check="true"
          finished-text="没有更多了"
          @load="load"
      >
          <!-- 商品卡片 -->
          <van-card
            v-for="(item, key) in list"
            :thumb="item.product.thumbs_text"
            @click-thumb="toProductInfo(item.proid)"
          >
            <template #title>
              <div class="title">{{ item.product.name }}</div>
            </template>

            <template #desc>
              <van-highlight :keywords="`${item.total}`" :source-string="`人数：${item.total}人`" highlight-class="people" />
              拼团时间：{{ item.createtime_text }}(开始) ~ {{ item.endtime_text }}(结束)<br />
              拼团价格：￥{{ item.product.team }}
            </template>

            <template #footer>
              <van-button type="danger" size="small" @click="TeamJoin(item.id,item.proid)">参与拼团</van-button>
              <van-button type="warning" size="small" @click="TeamInfo(item.id)">查看详情</van-button>

            </template>
          </van-card>
      </van-list>
  </van-pull-refresh>
</template>

<script setup>
  const { proxy } = getCurrentInstance();

  // 判断是否有查询具体的商品的拼团
  let proid = proxy.$route.query.proid ? proxy.$route.query.proid : 0;


  // 下拉刷新
  let list =ref([]) //数据列表
  let page =ref(1) //分页
  let loading =ref(false) //加载状态
  let finished =ref(false) //是否无更多数据
  let refreshing = ref(false) //下拉刷新

  // 下拉刷新
  const refresh = async () =>{
    //可以去掉定时器
    setTimeout(() => {
        //清空查询参数
        page.value = 1
        list.value = []
        finished.value = false
        loading.value = true

        //加载数据方法
        load()
    }, 500)
  }

  //加载数据方法 查询订单数据
  const load = async () =>{
    // 判断是否为加载中的状态
    if(refreshing.value){
      refreshing.value = false
    }

    // 发送请求
    var result = await proxy.$POST({
      url:'/team/index',
      params:{
        page: page.value,
        proid:proid
      }
    })

    // 请求发送完毕后，加载状态也就完毕了
    loading.value = false

    // 如果没有更多数据了 就说明已经加载到底了
    if(result.code == 0){
      finished.value = true
      return;
    }

    console.log(result.data)

    list.value = list.value.concat(result.data)
    page.value++
  }

  //跳转到购物车详情界面
  const toProductInfo = proid => proxy.$router.push({ path: '/product/info', query: { proid } })

  const TeamInfo = teamid => proxy.$router.push({path:'/team/info',query:{teamid}})

  // 参与拼团
  const TeamJoin = async (teamid,proid) => {
    console.log(teamid)

    // 存放到cookie当中去
    if (teamid) {
      proxy.$cookies.set('teamid',teamid)
    }

    // 跳转到商品详情界面去
    proxy.$router.push({path:'/product/info',query:{proid}})
  }

</script>

<style>
  .people{
    color:red;
  }
</style>

<style scoped>
  :deep(.cart) {
    display: flex;
    width: 100%;
  }
  ::v-deep .van-swipe-cell {
    width: 100%;
  }
  .delete-button {
    height: 100%;
  }


  .van-card{
    background-color:#fff;
  }

  .title{
    font-size:16px;
    font-weight: bold;
  }

  .tag{
    margin-right:5px;
  }

  .price{
    font-size:14px;
    font-weight: bold;
  }

  .van-checkbox-group1{
    overflow: scroll;
    height:615px;
  }

</style>
